<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>

<body>
    <div>
        <div>
            <table id="right" lay-filter="test"></table>
        </div>
    </div>
    <script src="../layui/layui.js"></script>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="../js/common.js"></script>
    <script src="../js/lodash.min.js"></script>
    <script>
        function Delete(id, btn) {
            layer.confirm('确定删除吗？', {
                icon: 3,
                title: '提示'
            }, function (index) {

                $.ajax({
                    url: "/api/user/" + id,
                    method: "delete"
                });
                $(btn).parents("tr").remove();
                layer.close(index);
            });
        }

        layui.use(['element', 'table', 'layer', 'laytpl', 'form'], function (data) {
            const table = layui.table;
            const layer = layui.layer;
            const form = layui.form;
            const laytpl = layui.laytpl;
            table.render({
                elem: '#right',
                url: '/api/user/all',
                autoSort: true,
                page: true,
                autoSort: false,
                toolbar: "#tb",
                defaultToolbar: ['filter', 'print', 'exports'],
                cols: [[
                    { field: 'mobile', title: '手机账号' },
                    { field: 'pwd', title: '密码', templet: '<div>*********</div>' },
                    { field: 'isAdmin', title: '管理员', sort: true, templet: '#swicthTp' },
                    {
                        field: 'updateTime',
                        title: '注册|添加时间',
                        templet: `
                            <div> 
                                {{=dateFormat(d.createTime)}}
                            </div>
                                `,
                    },
                    {
                        field: "操作",
                        templet:
                            `
                     <div class="layui-btn-group">
                        <button class="layui-btn layui-btn-sm" onclick="edit('{{d._id}}')"><i class="layui-icon">&#xe642;</i></button>
                        <button class="layui-btn layui-btn-sm layui-btn-danger" onclick="Delete('{{d._id}}',this)"><i class="layui-icon">&#xe640;</i></button>
                    </div>
                        `
                    },
                ]]
            });
            layui.table.on('sort(test)', function (obj) {
                tabObj.reload({
                    initSort: obj,
                    where: {
                        field: obj.field,
                        order: obj.type //排序方式
                    }
                });
            });
            $("#chaxun").click(function () {
                const key = $(".txt").val();
                if (key) {
                    layui.table.reload("right", {
                        where: {
                            key,
                            page: {
                                curr: 1
                            }
                        }
                    });
                } else {
                    layer.msg("关键字不能为空!", {
                        icon: 2,
                        time: 1000 //（如果不配置，默认是3秒）
                    })
                }
            })
            //设置开关按钮
            form.on('switch(adminDemo)', function (obj) {
                $.ajax({
                    url: "/api/user/" + obj.value,
                    method: "put",
                    data: {
                        isAdmin: obj.elem.checked
                    }
                })
            })
        })
        function edit(id) {
            location.href = "./modify.html?id=" + id;
        }
        
    </script>

    <script type="textml" id="swicthTp"> 
        <input type="checkbox" name="isAdmin" value="{{d._id}}" lay-skin="switch" lay-text="是|否" lay-filter="adminDemo"{{d.isAdmin == true ? 'checked' : ''}} >
    </script>

    <script type="text/html" id="tb">
        <div class="layui-table-tool-temp" style="height:40px; display: flex; ">
                <a href="./addUser.html" class="layui-btn layui-btn-sm" style="margin-top:3px;">添加用户</a>
           <form class="inline-block search-form" onsubmit="return false;">
            <input type="text" placeholder="关键字查询" class="layui-input search-input txt" style ="width:235px; margin-left:100px;">
            <button class="search-btn" lay-event="search" style="position: relative;left: 307px;top: -33px;opacity: .5;" id="chaxun">
                <i class="layui-icon layui-icon-search"></i>
            </button>
           </form>
        </div>
    </script>

</body>

</html>